<template>
  <div>
    <Row :gutter="16">
      <Col :xs="24" :sm="24" :md="12" :lg="12" style="margin-bottom:16px;">
        <Jdd-Card :padding="0" style="border:none;display:flex;padding:0px;">
          <div
            v-for="(item ,index) in monitorCardData"
            :key="item.id"
            style="padding:12px 32px;display:flex; flex:1;"
          >
            <Divider v-if="index!==0" type="vertical" style="margin:4px 0px;height:70px;"></Divider>
            <div style="margin-left:24px;">
              <div
                v-if="theme==='white'"
                style="color:#515A6E;font-size:36px;"
              >{{item.count|commaFormat}}</div>
              <div
                v-if="theme!=='white'"
                style="color:#D8D9DA;font-size:36px;"
              >{{item.count|commaFormat}}</div>
              <!-- <Jdd-TopCount v-model="item.count" :countUp="'count'+index"></Jdd-TopCount> -->
              <div :style="'color:'+item.color">
                <Jdd-Icon type="md-warning" size="18" />
                <span>{{item.text}}</span>
              </div>
            </div>
          </div>
        </Jdd-Card>
      </Col>

      <Col :xs="24" :sm="24" :md="12" :lg="12" style="margin-bottom:16px;">
        <Jdd-Card :padding="0" style="border:none;display:flex;padding:0px;">
          <div
            v-for="(item ,index) in indexCardData"
            :key="item.id"
            style="padding:12px 32px;display:flex; flex:1;"
          >
            <Divider v-if="index!==0" type="vertical" style="margin:4px 0px;height:70px;"></Divider>
            <div style="margin-left:24px;">
              <div
                v-if="theme==='white'"
                style="color:#515A6E;font-size:36px;"
              >{{item.count|commaFormat}}</div>
              <div
                v-if="theme!=='white'"
                style="color:#D8D9DA;font-size:36px;"
              >{{item.count|commaFormat}}</div>
              <!-- <Jdd-TopCount v-model="item.count" :countUp="'count'+index"></Jdd-TopCount> -->
              <div :style="'color:'+item.color">
                <Jdd-Icon type="md-warning" size="18" />
                <span>{{item.text}}</span>
              </div>
            </div>
          </div>
        </Jdd-Card>
      </Col>
    </Row>
    <Jdd-Card
      :padding="16"
      style="border:none;display:flex;justify-content: space-between;align-items: center;"
    >
      <div style="display:flex;">
        <Jdd-Select
          style="width:80px;"
          v-model="searchForm.monitor"
          :option="monitorList"
          @on-change="handleChangeMonitor"
          label-name="text"
          value-name="code"
        ></Jdd-Select>
        <span style="border-top: 1px solid #515A6E;width: 8px;margin: 16px 2px;"></span>
        <Jdd-Select
          style="width:80px;"
          v-model="searchForm.topType"
          :option="topList"
          @on-change="handleChangeType"
          label-name="text"
          value-name="code"
        ></Jdd-Select>
        <Jdd-Input
          style="margin-left:16px;"
          v-model="app"
          placeholder="搜索"
          @on-search="getAppData"
          search
        />
      </div>
      <div style="display:flex;">
        <span style="margin-right:4px;">自动刷新：</span>
        <Jdd-SwitchText v-model="autoStatus" size="small" @on-change="sChange"></Jdd-SwitchText>
        <ButtonGroup size="small" style="margin-left:16px;">
          <Jdd-BtnDefault
            :type="changeTab === 'card' ? 'primary' : 'default'"
            @click="cardOrTable('card')"
          >
            <Jdd-Icon type="icon-toWater" size="18" />
          </Jdd-BtnDefault>
          <Jdd-BtnDefault
            :type="changeTab === 'table' ? 'primary' : 'default'"
            @click="cardOrTable('table')"
          >
            <Jdd-Icon type="icon-toTables" size="18" />
          </Jdd-BtnDefault>
        </ButtonGroup>
      </div>
    </Jdd-Card>
    <Spin v-if="cardLoading" size="large" style="display: flex;justify-content: center"></Spin>
    <div v-if="!cardLoading"  style="display:flex;flex-wrap:wrap;margin-left:-15px;">
      <JddMonitorCard
        :theme="theme"
        v-for="item in monitorCardList"
        :key="item.id"
        :cardData="item"
        style="margin-left:15px;margin-top:15px;"
      />
    </div>
  </div>
</template>
<script>
import JddMonitorCard from './components/monitorCard.vue'
import { monitorCardList } from '../scripts/api'
export default {
  name: 'monitorHome',
  components: { JddMonitorCard },
  data () {
    return {
      searchForm: {
        monitor: '',
        topType: ''
      },
      changeTab: 'card',
      autoStatus: false,
      app: '',
      cardLoading: true,
      monitorCardData: [
        { id: 1, count: 2000, color: '#F05A28', text: '紧急告警数' },
        { id: 2, count: 2000, color: '#FF9904', text: '严重告警数' },
        { id: 3, count: 2000, color: '#E8C300', text: '警告告警数' }
      ],
      indexCardData: [
        { id: 1, count: 402000, color: '#2D8CF0', text: '指标指标指标' },
        { id: 2, count: 962000, color: '#2D8CF0', text: '指标指标指标' },
        { id: 3, count: 21000, color: '#2D8CF0', text: '指标指标指标' }
      ],
      monitorList: [
        { code: 'cpu', text: 'cpu' },
        { code: 'me', text: '内存' }
      ],
      topList: [
        { code: '1', text: 'top1' },
        { code: '2', text: 'top2' }
      ],
      monitorCardList: []
    }
  },
  created () {
    monitorCardList().then(response => {
      if (response.status === 200 && response.data) {
        const data = response.data.data || []
        this.cardLoading = false
        this.monitorCardList = data.map(item => {
          return {
            title: item.title,
            desc: item.desc,
            color: item.color,
            circleData: item.circleData || [],
            textArr: ['CPU', '内存', '磁盘', '网络', '告警'],
            valueArr: [
              item.CPU + '%',
              item.memory + '%',
              item.disk + '%',
              item.network + '%',
              item.waring
            ]
          }
        })
      }
    })
  },
  computed: {
    theme () {
      return this.$store.state.theme
    }
  },
  methods: {
    handleChangeMonitor () {},
    handleChangeType () {},
    getAppData () {},
    sChange () {}
  }
}
</script>
